<template>
	<div class="box" v-loading="loading">
		<div>
			<el-card shadow="never" class="box-card">
				<span style="font-size: 1rem;font: bold;">
					<i class="el-icon-star-on"></i>
					帮助中心
				</span>
			</el-card>
		</div>
		<div>
			<div class="news_content">
				<el-tabs v-model="activeName" style="width: 98% ;margin: 0 auto;" @tab-click="handleClick">
					<el-tab-pane v-for="(item, index) in banzhulist" :key="index" :label="item.rule_title" :name="item.rule_title" @click="qiehuan(index)"></el-tab-pane>
				</el-tabs>
				<div class="htmlbox" v-infinite-scroll="load" v-html="strings"></div>
			</div>
		</div>
	</div>
</template>

<script>
import { get_rule } from '../../api/help.js';
export default {
	name: 'help',
	data() {
		return {
			banzhulist: [],
			activeName: 'second',
			strings: '',
			loading: true
		};
	},
	async created() {
		this.loading = true;
		let a = await get_rule({ query: { } });
		this.banzhulist = a.data;
		if (a.data[0]) {
			(this.activeName = a.data[0].rule_title), (this.strings = a.data[0].rule_content);
		}
		console.log(this.strings);
		console.log(this.banzhulist);
		setTimeout(() => {
			this.loading = false;
		}, 500);
	},
	methods: {
		handleClick(tab) {
			console.log(tab.index);
			this.strings = this.banzhulist[tab.index].rule_content;
		},
		load() {}
	}
};
</script>

<style lang="scss" scoped>
.box {
	width: 90%;
	height: 500px;
	margin: 20px auto;
	border: 1px solid #dcdfe6;
	box-shadow: 2px 2px 5px #dcdfe6;
	border-radius: 5px;
}
.box-card {
	width: 98%;
	margin: 10px auto;
	background-color: rgb(243, 243, 243);
}
.news_content {
	width: 98%;
	margin: 0 auto;
}
.htmlbox {
	height: 320px;
	overflow: auto;
}
</style>
